<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>福农大植81同学会</title>
    <!-- 
    <link rel="stylesheet" href="assets/css/weui.min.css"/>
		-->
	<style type="text/css">
		@import url("assets/css/weui.min.css");
	</style>
	
 	<style>
		body,html{
			height:100%;-webkit-tap-highlight-color:transparent
		}
		.page,body{
			background-color:#fbf9fe
		}
		.container{
			overflow:hidden
		}
		.container,.page{
			position:absolute;top:0;right:0;bottom:0;left:0
		}
		.page{
			overflow-y:auto;-webkit-overflow-scrolling:touch
		}
		.hd {
			padding:2em 0
		}
		.page_title {
			text-align:center;font-size:34px;color:#3CC51F;font-weight:400;margin:0 15%
		}
		.page_desc{
			text-align:center;color:#888;font-size:14px
		}
		img.thumb{
			width:180px;
			height:120px;
			border-radius: 15px;
			-webkit-border-radius: 15px;
			-moz-border-radius: 15px;
		}
	</style>
</head>
<body ontouchstart>
  <div class="container js_container">
	<div class="page">
      <div class="hd">
        <h1 class="page_title">相逢是首歌</h1>
		<!-- 
        <p class="page_desc new">＋添加</p> -->
      </div>
      <div class="bd">
	     <div class="weui_msg">
	         <!-- 
			 <div class="weui_text_area">
	             <img class="thumb" src="assets/img/20150726.jpg" />
				 <p class="weui_msg_desc">15-12-18｜南平同学政治协商会</p>
	         </div>
	         <div class="weui_extra_area">
	             <a href="">查看详情</a>
	         </div> -->
	     </div>
	  </div>
	</div> 
  </div>	
  
  <!-- loading toast -->
  <div id="toast" class="weui_loading_toast" style="display:none;">
      <div class="weui_mask_transparent"></div>
      <div class="weui_toast">
          <div class="weui_loading">
              <div class="weui_loading_leaf weui_loading_leaf_0"></div>
              <div class="weui_loading_leaf weui_loading_leaf_1"></div>
              <div class="weui_loading_leaf weui_loading_leaf_2"></div>
              <div class="weui_loading_leaf weui_loading_leaf_3"></div>
              <div class="weui_loading_leaf weui_loading_leaf_4"></div>
              <div class="weui_loading_leaf weui_loading_leaf_5"></div>
              <div class="weui_loading_leaf weui_loading_leaf_6"></div>
              <div class="weui_loading_leaf weui_loading_leaf_7"></div>
              <div class="weui_loading_leaf weui_loading_leaf_8"></div>
              <div class="weui_loading_leaf weui_loading_leaf_9"></div>
              <div class="weui_loading_leaf weui_loading_leaf_10"></div>
              <div class="weui_loading_leaf weui_loading_leaf_11"></div>
          </div>
          <p class="weui_toast_content">数据加载中</p>
      </div>
  </div>
  <!--end toast-->
  
  <script type="text/html" id="tpl_msg">
    <div class="page">
      <div class="weui_msg">
          <div class="weui_icon_area"><i class="weui_icon_success weui_icon_msg"></i></div>
          <div class="weui_text_area">
              <h2 class="weui_msg_title">操作成功</h2>
              <p class="weui_msg_desc">内容详情，可根据实际需要安排</p>
          </div>
          <div class="weui_opr_area">
              <p class="weui_btn_area">
                  <a href="javascript:;" class="weui_btn weui_btn_primary">确定</a>
                  <a href="javascript:;" class="weui_btn weui_btn_default">取消</a>
              </p>
          </div>
          <div class="weui_extra_area">
              <a href="">查看详情</a>
          </div>
      </div>
    </div>
  </script> 	 

  <script src="src/zepto.min.js"></script>
	<!-- js-sdk weixin 签名 -->
  <script type="text/javascript" src = "http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
  
  <script>
	wxSig()
  
	// js-sdk签名
	function wxSig(){
		$.ajax({
	        url: 'http://www.xzpt.org/wx_ghjy/script/weixinJS/wx_sig.php?url=' + location.href.split('#')[0] , // 没认证无法分享，借用认证公众号
			dataType: "json",
			success: function(result){
				var signPackage = result
				wx.config({
					debug: false,
	                  appId: signPackage.appId,
	                  timestamp: signPackage.timestamp,
	                  nonceStr: signPackage.nonceStr,
	                  signature: signPackage.signature,
					jsApiList: [
					  'onMenuShareTimeline',
					  'onMenuShareAppMessage',
	                  'chooseImage',
					  'previewImage',
					  'hideOptionMenu'
					]
				});

			    wx.ready(function () {
					// 在这里调用 API，默认的
					//wx.hideOptionMenu()
					wx.onMenuShareAppMessage({
			  		    title: '福农大植保81同学会', // 分享标题
			  		    desc: '相逢是首歌｜1985年毕业后，同学相逢记录', // 分享描述
			  		    link: 'http://www.xzpt.org/wxqy_81/timeline_weui.html', // 分享链接
			  		    imgUrl: 'http://www.xzpt.org/wxqy_81/assets/img/favicon.jpg', // 分享图标
			  		    type: '', // 分享类型,music、video或link，不填默认为link
			  		    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
			  		    success: function () { 
			  		        // 用户确认分享后执行的回调函数
							console.log('ok')
			  		    },
			  		    cancel: function () { 
			  		        // 用户取消分享后执行的回调函数
							console.log('fail')
			  		    }
			  		});
				
			    });
			}
		});
	}
  </script>
  
  <script>
  	var $container = $('.js_container');
	var $new = $('.new');
	$new.on('click',function(e){
		return
		var $tpl = $($('#tpl_msg').html())
		$container.append($tpl);
	})
	
	$('#toast').show();
	$.ajax({
    	url: 'http://www.xzpt.org/wxqy_81/script/readTimelineList.php',
		dataType: "json",
		data: {"userId": ""},
		success: function(result){
			$('#toast').hide();
			console.log(result)
			populateData(result.data)
		},
	});
	function populateData(items){
		items.forEach(function(item){
			var listItem = '<div class="weui_text_area"><img class="thumb" src=' + 
				item.photo + ' /><p class="weui_msg_desc">' + 
				item.date.substr(2,8) + '｜' + item.title + '</p></div>'
			$('.weui_msg').append(listItem)
		})
		$('img.thumb').on('click',function(e){
			WeixinJSBridge.invoke('imagePreview', {  
				'current' : e.target.src,  
				'urls' : [e.target.src]  
			});
		})
	}
  </script>
  
</body>
</html>
